<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog"
    :append-to-body="true"
    title="编辑盘点单"
    align="center"
    :close-on-click-modal="false"
    :visible.sync="dialogEditVisible"
    @closed="closeDialog"
  >
    <el-form ref="form" :rules="rules" :model="formData" status-icon>
      <el-form-item label="盘点仓库" :label-width="formLabelWidth">
        <el-select
          v-model="formData.storageId"
          placeholder="请选择仓库"
          @change="storageChange"
        >
          <el-option
            v-for="item in storageList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label=""
        :label-width="formLabelWidth"
        style="text-align: left"
      >
        <div
          style="
            border: 1px solid #dcdfe6;
            padding-left: 15px;
            border-radius: 4px;
          "
        >
          <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="formData.storageAreaIdList"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in storageAreaList"
              :key="item.id"
              :label="item.id"
              >{{ item.areaName }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
      </el-form-item>
      <el-form-item label="盘点负责人" :label-width="formLabelWidth">
        <el-select v-model="formData.operatorId" placeholder="请选择盘点负责人">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="formData.remark" type="textarea"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="update">保存</el-button>
        <el-button @click="addAndInventory">保存并开始盘点</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { get, update } from "../../../api/Material/MaterialInventoryCheck.js";
import { getStorageList, getStorageAreaList, getUserListNoPage } from "../../../api/Material/Common.js";
export default {
  name: "InventoryAdd",
  props: {
    dialogEditVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "0",
    }
  },
  data() {
    return {
      loading: false,
      isIndeterminate: true,
      checkAll: false,
      storageList: [],
      storageAreaList: [],
      formLabelWidth: "100px",
      userList: [],
      dataList: [],
      formData: {
        id: 0,
        storageId: 0,
        operatorId: this.$store.getters.currentUserId,
        storageAreaIdList: [],
        remark: ''
      },
      rules: {
        storageAreaIdList: [
          { type: 'array', required: true, message: '请至少选择一个库区', trigger: 'change' }
        ]
      }
    };
  },
  mounted() {
    this.getStorageListFun();
    this.getUserList()
    this.Init()
  },
  methods: {
    Init() {
      get({ id: this.editId }).then(res => {
        this.formData.storageId = res.data.storageId;
        this.formData.operatorId = res.data.operatorId;
        this.formData.remark = res.data.remark;
        // 选中仓库对应库区
        this.getStorageAreaListFun(this.formData.storageId)
        if (res.data.storageAreaRange !== null && res.data.storageAreaRange !== '') {
          this.formData.storageAreaIdList = res.data.storageAreaRange.split(',');
        }
      }).catch(res => { });
    },
    handleCheckAllChange(val) {
      this.formData.storageAreaIdList = [];
      if (val) {
        this.storageAreaList.map((item) => {
          this.formData.storageAreaIdList.push(item.id);
        });
      }
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      this.formData.storageAreaIdList = value;
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.storageAreaList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.storageAreaList.length;
    },
    getUserList() {
      getUserListNoPage().then((res) => {
        this.userList = res.data;
      });
    },
    getStorageListFun() {
      getStorageList().then(res => {
        this.storageList = res.data.dataList
      }).catch(res => { });
    },
    getStorageAreaListFun(id) {
      getStorageAreaList({ storageId: id }).then(res => {
        this.storageAreaList = res.data.dataList;
      }).catch(res => { });
    },
    storageChange(val) {
      this.getStorageAreaListFun(val);
      this.formData.storageAreaIdList = [];
    },
    update() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.formData.storageAreaIdList === null || this.formData.storageAreaIdList.length <= 0) {
            this.$message.error("请勾选盘点仓库库区!");
            return false;
          }
          this.storageList.map((item) => {
            if (item.id === this.formData.storageId) { this.formData.storageName = item.name; }
          })
          this.userList.map((item) => {
            if (item.id === this.formData.operatorId) { this.formData.operatorName = item.name; }
          })
          this.formData.id = this.editId;
          update(this.formData).then(res => {
            this.closeDialog()
          }).catch(res => { });
        }
      })
    },
    addAndInventory() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.formData.storageAreaIdList === null || this.formData.storageAreaIdList.length <= 0) {
            this.$message.error("请勾选盘点仓库库区!");
            return false;
          }
          this.formData.status = 200
          this.formData.statusName = '盘点中';
          this.storageList.map((item) => {
            if (item.id === this.formData.storageId) { this.formData.storageName = item.name; }
          })
          this.userList.map((item) => {
            if (item.id === this.formData.operatorId) { this.formData.operatorName = item.name; }
          })
          this.formData.id = this.editId;
          update(this.formData).then(res => {
            this.closeDialog()
          }).catch(res => { });
        }
      })
    },
    cancel() {
      this.$emit("getListFun")
      this.$emit("update:dialogEditVisible", false);
    },
    closeDialog() {
      this.cancel();
    },
  },
};
</script>
<style lang="scss" scoped>
.border {
  text-align: left;
  height: 100px;
  border: 1px solid #e6ebf5;
  text-indent: 2px;
  margin-top: 10px;
}

.title {
  text-align: left;
  padding-top: 14px;
  font-weight: 900;
}

.MaterialInspectionFormEdit {
}
</style>
